import { Card, Button, Checkbox, Form, Input, message } from 'antd'
import { useEffect } from 'react';
import { observer } from 'mobx-react-lite'
import { useNavigate } from 'react-router-dom'
import logo from '../../img/logo.png';
import './index.scss'
import *as LoginApi from '../../api/Login.js';
export default observer((props)=>{
  const goto = useNavigate();

  const onFinish =  (values) => {
    console.log('Success:', values);
    if (values.mobile === '13911111111' && values.code === '246810'){
      LoginApi.getLogin(values).then(res => {
        if (res.status === 201) {
          message.success(res.data.message);
          goto('/home');
        } else {
          message.error('登录失败');
        }
      })
    }
  };

    return (
      <div className="login">
        <Card className="login-container">
          <img className="login-logo" src={logo} alt="" />
          {/* 登录表单 */}
          <Form
            onFinish={onFinish}
            initialValues={{
              mobile: '13911111111',
              code: '246810',
              remember: true
            }}
            name="mobile"
            validateTrigger={['onBlur', 'onChange']}
            autoComplete="off"
          >
            <Form.Item
              name="mobile"
              label="账号"
              rules={[
                {
                  pattern: /^1[3-9]\d{9}$/,
                  message: '手机号码格式不对',
                  validateTrigger: 'onBlur'
                },
                { required: true, message: '请输入手机号' }
              ]}
            >
              <Input size="large" placeholder="请输入手机号" />
            </Form.Item>

            <Form.Item
              name="code"
              label="密码"
              rules={[
                { len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' },
                { required: true, message: '请输入验证码' }
              ]}
            >
              <Input.Password size="large" placeholder="请输入验证码" maxLength={6} />
            </Form.Item>

            <Form.Item name="remember" valuePropName="checked">
              <Checkbox className="login-checkbox-label">
                我已阅读并同意「用户协议」和「隐私条款」
              </Checkbox>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit"   size="large" block>
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
})
